<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置字体图标</title>
    <link rel="stylesheet" href="../dest/css/fui.css">
    <style>
        .demo{
            width:600px;
            margin: 50px auto;
        }
        .demo li{
            float: left;
            width:20%;
            border: 1px solid #dcdcdc;
            box-sizing: border-box;
            height:100px;
            text-align: center;
            padding: 20px 0;
            color: #666;
            margin: -1px 0 0 -1px;
        }
        .demo li:hover{
            color: #f90;
        }
    </style>
</head>
<body>
<ul class="demo">
    <li>
        <i class="fui-font fui-font-radio"></i>
        <div class="demo-title">单选</div>
        <div class="demo-code">fui-font-radio</div>
    </li>
    <li class="fui-radio-checked">
        <i class="fui-font fui-font-radio"></i>
        <div class="demo-title">单选(选中)</div>
        <div class="demo-code">fui-font-radio</div>
    </li>
    <li>
        <i class="fui-font fui-font-checkbox"></i>
        <div class="demo-title">复选</div>
        <div class="demo-code">fui-font-checkbox</div>
    </li>
    <li>
        <i class="fui-font fui-font-girl"></i>
        <div class="demo-title">女</div>
        <div class="demo-code">fui-font-girl</div>
    </li>
    <li>
        <i class="fui-font fui-font-boy"></i>
        <div class="demo-title">男</div>
        <div class="demo-code">fui-font-boy</div>
    </li>
    <li>
        <i class="fui-font fui-font-zan"></i>
        <div class="demo-title">赞</div>
        <div class="demo-code">fui-font-zan</div>
    </li>
    <li>
        <i class="fui-font fui-font-heart"></i>
        <div class="demo-title">心型</div>
        <div class="demo-code">fui-font-heart</div>
    </li>
    <li>
        <i class="fui-font fui-font-home"></i>
        <div class="demo-title">主页</div>
        <div class="demo-code">fui-font-home</div>
    </li>
    <li>
        <i class="fui-font fui-font-pic"></i>
        <div class="demo-title">图片</div>
        <div class="demo-code">fui-font-pic</div>
    </li>
    <li>
        <i class="fui-font fui-font-file"></i>
        <div class="demo-title">文件</div>
        <div class="demo-code">fui-font-file</div>
    </li>
    <li>
        <i class="fui-font fui-font-android"></i>
        <div class="demo-title">安卓</div>
        <div class="demo-code">fui-font-android</div>
    </li>
    <li>
        <i class="fui-font fui-font-camera"></i>
        <div class="demo-title">相机</div>
        <div class="demo-code">fui-font-camera</div>
    </li>
    <li>
        <i class="fui-font fui-font-check"></i>
        <div class="demo-title">勾选</div>
        <div class="demo-code">fui-font-check</div>
    </li>
    <li>
        <i class="fui-font fui-font-eraser"></i>
        <div class="demo-title">橡皮</div>
        <div class="demo-code">fui-font-eraser</div>
    </li>
    <li>
        <i class="fui-font fui-font-lock"></i>
        <div class="demo-title">密码</div>
        <div class="demo-code">fui-font-lock</div>
    </li>
    <li>
        <i class="fui-font fui-font-ios"></i>
        <div class="demo-title">ios</div>
        <div class="demo-code">fui-font-ios</div>
    </li>
    <li>
        <i class="fui-font fui-font-account"></i>
        <div class="demo-title">账号</div>
        <div class="demo-code">fui-font-account</div>
    </li>
    <li>
        <i class="fui-font fui-font-share"></i>
        <div class="demo-title">分享</div>
        <div class="demo-code">fui-font-share</div>
    </li>
    <li>
        <i class="fui-font fui-font-pc"></i>
        <div class="demo-title">pc</div>
        <div class="demo-code">fui-font-pc</div>
    </li>
    <li>
        <i class="fui-font fui-font-collect"></i>
        <div class="demo-title">收藏</div>
        <div class="demo-code">fui-font-collect</div>
    </li>
    <li>
        <i class="fui-font fui-font-news"></i>
        <div class="demo-title">消息</div>
        <div class="demo-code">fui-font-news</div>
    </li>
    <li>
        <i class="fui-font fui-font-voice"></i>
        <div class="demo-title">语音</div>
        <div class="demo-code">fui-font-voice</div>
    </li>
    <li>
        <i class="fui-font fui-font-synthesise"></i>
        <div class="demo-title">综合</div>
        <div class="demo-code">fui-font-synthesise</div>
    </li>
    <li>
        <i class="fui-font fui-font-code"></i>
        <div class="demo-title">二维码</div>
        <div class="demo-code">fui-font-code</div>
    </li>
    <li>
        <i class="fui-font fui-font-filter"></i>
        <div class="demo-title">过滤</div>
        <div class="demo-code">fui-font-filter</div>
    </li>
    <li>
        <i class="fui-font fui-font-attachment"></i>
        <div class="demo-title">附件</div>
        <div class="demo-code">fui-font-attachment</div>
    </li>
    <li>
        <i class="fui-font fui-font-add"></i>
        <div class="demo-title">添加</div>
        <div class="demo-code">fui-font-add</div>
    </li>
    <li>
        <i class="fui-font fui-font-edit"></i>
        <div class="demo-title">编辑</div>
        <div class="demo-code">fui-font-edit</div>
    </li>
    <li>
        <i class="fui-font fui-font-back"></i>
        <div class="demo-title">返回</div>
        <div class="demo-code">fui-font-back</div>
    </li>
    <li>
        <i class="fui-font fui-font-warn"></i>
        <div class="demo-title">警告</div>
        <div class="demo-code">fui-font-warn</div>
    </li>
    <li>
        <i class="fui-font fui-font-time"></i>
        <div class="demo-title">时间</div>
        <div class="demo-code">fui-font-time</div>
    </li>
    <li>
        <i class="fui-font fui-font-del"></i>
        <div class="demo-title">删除</div>
        <div class="demo-code">fui-font-del</div>
    </li>
    <li>
        <i class="fui-font fui-font-close"></i>
        <div class="demo-title">关闭</div>
        <div class="demo-code">fui-font-close</div>
    </li>
    <li>
        <i class="fui-font fui-font-set"></i>
        <div class="demo-title">设置</div>
        <div class="demo-code">fui-font-set</div>
    </li>
    <li>
        <i class="fui-font fui-font-search"></i>
        <div class="demo-title">搜索</div>
        <div class="demo-code">fui-font-search</div>
    </li>
    <li>
        <i class="fui-font fui-font-site"></i>
        <div class="demo-title">定位</div>
        <div class="demo-code">fui-font-site</div>
    </li>
    <li>
        <i class="fui-font fui-font-prev-m"></i>
        <div class="demo-title">左箭头</div>
        <div class="demo-code">fui-font-prev-m</div>
    </li>
    <li>
        <i class="fui-font fui-font-next-m"></i>
        <div class="demo-title">右箭头</div>
        <div class="demo-code">fui-font-next-m</div>
    </li>
    <li>
        <i class="fui-font fui-font-prev-y"></i>
        <div class="demo-title">左双箭头</div>
        <div class="demo-code">fui-font-prev-y</div>
    </li>
    <li>
        <i class="fui-font fui-font-next-y"></i>
        <div class="demo-title">右双箭头</div>
        <div class="demo-code">fui-font-next-y</div>
    </li>
</ul>
</body>
</html>
